<script lang="ts" setup>
import type { PlusColumn } from 'plus-pro-components'

import { getFinancialOrg } from '@fl/api/joint-api/index'
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import UpLoadFileOss from '@fl/components/upLoadFile-oss.vue'
import { useAreaData } from '@/hooks/useAreaList'

const props = defineProps(['state', 'loading','areaList'])
const emits = defineEmits(['close', 'submit', 'updateloading'])
const orgOptions = ref([])
const { loading, state } = toRefs(props)

async function getOrgOptions() {
    const res = await getFinancialOrg(null)
    orgOptions.value = res.data.map((item) => {
        return {
            value: item.enterpriseObjectID,
            label: item.enterpriseName,
        }
    })
}
getOrgOptions()

const { areaList } = useAreaData()
const currentAreaList = computed(() => {
    return areaList?.value.find((item: any) => item.code === state.value.cityCode?.split('-')[0])?.areaList || []
})

const columns: PlusColumn[] = [
    {
        fieldProps: { maxlength: 20 },
        label: '金融机构',
        prop: 'name',
        valueType: 'copy',
    },
    {
        fieldProps: { maxlength: 20 },
        label: '机构编码',
        prop: 'code',
        valueType: 'copy',
    },
      {
        // colProps: {
        //     span: 12,
        // },
        label: '所属城市',
        options: computed(() => {
            return areaList?.value.map((item: any) => {
                return {
                    label: item.name,
                    value: `${item.code}-${item.name}`,
                }
            })
        }),
        prop: 'cityCode',
        valueType: 'select',
    },
     {
        // colProps: {
        //     span: 12,
        // },
        label: '所属区域',
        options: computed(() => {
            return currentAreaList.value?.map((item: any) => {
                return {
                    label: item.name,
                    value: `${item.code}-${item.name}`,
                }
            })
        }),
        prop: 'areaCode',
        valueType: 'select',
    },
    {
        fieldProps: {
            filterable: true,
        },
        label: '关联企业',
        options: orgOptions,
        prop: 'enterpriseObjectID',
        valueType: 'select',
    },
    {
        label: '合作协议',
        prop: 'protocol',
    },
    {
        label: '许可证',
        prop: 'licence',
    },
    {
        label: 'logo',
        prop: 'logo',
    },
]

function validateAlphanumeric(rule, value, callback) {
    if (!value.match(/^[A-Z0-9]+$/i)) {
        callback(new Error('请输入英文或数字'))
    }
    else {
        callback()
    }
}
const rules = {
    code: [
        {
            message: '请输入机构编码',
            required: true,
        },
        { trigger: 'blur', validator: validateAlphanumeric },
    ],
    enterpriseObjectID: [
        {
            message: '请选择关联企业',
            required: true,
        },
    ],
    licence: [
        {
            message: '请上传许可证',
            required: true,
        },
    ],
    logo: [
        {
            message: '请上传logo',
            required: true,
        },
    ],
    cityCode: [
        {
            message: '请选择所属城市',
            required: true,
        },
    ],
    name: [
        {
            message: '请输入金融机构',
            required: true,
        },
    ],
    protocol: [
        {
            message: '请上传合作协议',
            required: true,
        },
    ],
}

function mySubmit() {
    emits('submit')
}
</script>

<template>
    <el-card>
        <PlusForm v-model="state"
                  :columns="columns"
                  :rules="rules"
                  label-width="100"
                  @submit="mySubmit"
        >
            <template #plus-field-logo>
                <UpdatedOss v-model="state.logo"
                            accept=".png,.jpg,.jpeg"
                            :size="200"
                            @success="emits('updateloading', false)"
                            @before-upload="emits('updateloading', true)"
                />
            </template>

            <template #plus-field-licence>
                <UpLoadFileOss v-model="state.licence"
                               accept=".pdf"
                               @success="emits('updateloading', false)"
                               @beforeupload="emits('updateloading', true)"
                />
            </template>

            <template #plus-field-protocol>
                <UpLoadFileOss v-model="state.protocol"
                               accept=".pdf"
                               @success="emits('updateloading', false)"
                               @beforeupload="emits('updateloading', true)"
                />
            </template>

            <template #footer="{ handleSubmit }">
                <div style="margin: 0 auto">
                    <el-button @click="emits('close')">
                        返回
                    </el-button>

                    <el-button type="primary"
                               :loading="loading"
                               @click="handleSubmit"
                    >
                        提交
                    </el-button>
                </div>
            </template>
        </PlusForm>
    </el-card>
</template>
